<template>
  <s-layout :title="typeMaps[state.type]" class="withdraw-wrap" navbar="inner">
    <view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[
      {
        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
        paddingTop: Number(statusBarHeight + 108) + 'rpx',
      },
    ]">
      <view class="">
        <view class="num-title">当前积分</view>
        <view class="wallet-num">{{ userInfo.score }}</view>
      </view>
      <!-- <button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/recharge-log')">充值记录</button> -->
    </view>
    <view class="recharge-box">
      <view class="recharge-card-box">
		  <!-- <view class="input-label ss-m-b-50">{{$t('pages.user.golend_turn.zzsjh')}}</view>
		  <view class="input-box ss-flex border-bottom ss-p-b-20">
		    <uni-easyinput v-model="state.mobile" type="digit" :placeholder="$t('pages.user.golend_turn.zzsjh')" :inputBorder="false">
		    </uni-easyinput>
		  </view> -->
		  
        <view class="input-label ss-m-t-50 ss-m-b-50">兑换数量</view>
        <view class="input-box ss-flex border-bottom ss-p-b-20">
          <!-- <view class="unit">￥</view> -->
          <uni-easyinput v-model="state.money" type="digit" :placeholder="请输入兑换数量" :inputBorder="false">
          </uni-easyinput>
        </view>
		<!-- <view class="input-label ss-m-t-50 ss-m-b-50">{{$t('pages.user.info.anquanpwd')}}</view>
		<view class="input-box ss-flex border-bottom ss-p-b-20">
		  <uni-easyinput v-model="state.secure_password" type="password" :placeholder="$t('pages.user.info.anquanpwd')" :inputBorder="false">
			  <template v-slot:right>
			  	<button  class="ss-reset-button code-btn code-btn-start" @tap.top="sheep.$router.go('/pages/user/info')" > 
			  		{{$t('pages.user.info.shezhi')}}{{$t('pages.user.info.anquanpwd')}}
			  	</button>
			  </template>
		  </uni-easyinput>
		</view> -->
        <!-- <view class="face-value-box ss-flex ss-flex-wrap ss-m-y-40">
          <button class="ss-reset-button face-value-btn" v-for="item in state.faceValueList" :key="item.money"
            :class="[{ 'btn-active': state.money == parseFloat(item.money) }]" @tap="onCard(item.money)">
            <text class="face-value-title">{{ item.money }}</text>
            <view v-if="item.gift" class="face-value-tag">
              送{{ item.gift }}{{ state.data.gift_type == 'money' ? '元' : '积分' }}</view>
          </button>
        </view> -->
        <button v-if="state.type == 'principal'" class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
          确认转增
        </button>
		<button v-if="state.type == 'golden'" class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
		  确认兑换
		</button>
      </view>
      <!-- <view class="" v-if="state.data.status === 0"> {{$t('pages.user.golend_turn.guanbizhuanzhang')}} </view> -->
    </view>
	<view class="draw-notice">
	  <view class="title ss-m-b-30" v-if="state.type == 'principal'">转赠说明</view>
	   <view class="title ss-m-b-30" v-if="state.type == 'golden'">兑换说明</view>
	  <!-- <view class="draw-list" v-for="(rule, index) in state.rulesList" :key="index">
	    {{ index + 1 }}.{{ rule }}
	  </view> -->
	  <view class="draw-list" v-if="state.type == 'principal'">
	   {{state.znsm}}
	  </view>
	  <view class="draw-list" v-if="state.type == 'golden'">
	   {{state.duihuanshuoming}}
	  </view>
	</view>
  </s-layout>
</template>

<script setup>
import { computed, reactive } from 'vue';
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';

const userInfo = computed(() => sheep.$store('user').userInfo);
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/withdraw_bg.png');

const state = reactive({
  money: '',
  mobile: '',
  type: '',
  secure_password: '',
  data: {},
  faceValueList: [],
  duihuanshuoming:'',
  znsm:''
});
// 点击卡片

 const typeMaps = {
	  'money': '代金券',
	  'principal': '转赠金积分',
	  'golden': '兑换黄金券',
	  'score': '绿色积分',
  }

function onCard(e) {
  state.money = e;
}
async function getRechargeTabs() {
  const res = await sheep.$api.trade.rechargeRules();
  if (res.code === 1) {
    state.data = res.data;
    state.data.status = res.data.status;
    state.faceValueList = res.data.quick_amounts;
	state.duihuanshuoming = res.data.duihuanshuoming
	state.znsm = res.data.znsm

  }
  if(res.code == 3) {
	  state.data = res.data;
	  state.data.status = res.data.status;
	  state.faceValueList = res.data.quick_amounts;
	  state.duihuanshuoming = res.data.duihuanshuoming
	  state.znsm = res.data.znsm
  	uni.showModal({
  		title: t('pages.goods.order.tishi'),
  		showCancel: false,
  		confirmText: t('pages.user.info.shezhi'),
  		content: t('pages.user.info.shezhi')+t('pages.user.info.anquanpwd'),
  		success: async function (res) {
  		  if (res.confirm) {
  			sheep.$router.go('/pages/user/info')
  		  }
  		},
  	});
  }
}

function onChange(e) {
  state.data.gift_type = e.detail.value;
}

async function onConfirm() {
  const { code, data } = await sheep.$api.trade.green_exchange({
    money: state.money,
    type: state.type,
  });
  if (code === 1) {
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
    // #endif
	
	await sheep.$store('user').getInfo()
    uni.showToast({
      title: '转让成功',
      icon: 'none',
    });
  }
}
onLoad((options) => {
	state.type = options.type
  getRechargeTabs();
});
</script>

<style lang="scss" scoped>
:deep() {
  .uni-input-input {
    font-family: OPPOSANS !important;
  }
}

.wallet-num-box {
  padding: 0 40rpx 80rpx;
  background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
  border-radius: 0 0 5% 5%;

  .num-title {
    font-size: 26rpx;
    font-weight: 500;
    color: $white;
    margin-bottom: 20rpx;
  }

  .wallet-num {
    font-size: 60rpx;
    font-weight: 500;
    color: $white;
    font-family: OPPOSANS;
  }

  .log-btn {
    width: 170rpx;
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid $white;
    border-radius: 30rpx;
    padding: 0;
    font-size: 26rpx;
    font-weight: 500;
    color: $white;
  }
}

.recharge-box {
  position: relative;
  padding: 0 30rpx;
  margin-top: -60rpx;
}

.save-btn {
  width: 620rpx;
  height: 86rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
}

.recharge-card-box {
  width: 690rpx;
  background: var(--ui-BG);
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;

  .input-label {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }

  .unit {
    display: flex;
    align-items: center;
    font-size: 48rpx;
    font-weight: 500;
  }

  :deep(.uni-easyinput__placeholder-class) {
    font-size: 28rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
  }

  :deep(.uni-easyinput__content-input) {
    font-size: 48rpx;
  }

  .face-value-btn {
    width: 200rpx;
    height: 144rpx;
    border: 1px solid var(--ui-BG-Main);
    border-radius: 10rpx;
    position: relative;
    z-index: 1;
    margin-bottom: 15rpx;
    margin-right: 15rpx;

    &:nth-of-type(3n) {
      margin-right: 0;
    }

    .face-value-title {
      font-size: 36rpx;
      font-weight: 500;
      color: var(--ui-BG-Main);
      font-family: OPPOSANS;

      &::after {
        content: '元';
        font-size: 24rpx;
        margin-left: 6rpx;
      }
    }

    .face-value-tag {
      position: absolute;
      z-index: 2;
      height: 40rpx;
      line-height: 40rpx;
      background: var(--ui-BG-Main);
      opacity: 0.8;
      border-radius: 10rpx 0 20rpx 0;
      top: 0;
      left: -2rpx;
      padding: 0 16rpx;
      font-size: 22rpx;
      color: $white;
      font-family: OPPOSANS;
    }

    &::before {
      position: absolute;
      content: ' ';
      width: 100%;
      height: 100%;
      background: var(--ui-BG-Main);
      opacity: 0.1;
      z-index: 0;
      left: 0;
      top: 0;
    }
  }

  .btn-active {
    z-index: 1;

    &::before {
      content: '';
      background: var(--ui-BG-Main);
      opacity: 1;
    }

    .face-value-title {
      color: $white;
      position: relative;
      z-index: 1;
      font-family: OPPOSANS;
    }

    .face-value-tag {
      background: $white;
      color: var(--ui-BG-Main);
      font-family: OPPOSANS;
    }
  }
}
 // 提现说明
  .draw-notice {
    width: 684rpx;
    background: #ffffff;
    border: 2rpx solid #fffaee;
    border-radius: 20rpx;
    margin: 20rpx 32rpx 0 32rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .title {
      font-weight: 500;
      color: #333333;
      font-size: 30rpx;
    }

    .draw-list {
      font-size: 24rpx;
      color: #999999;
      line-height: 46rpx;
    }
  }
</style>
